<template>
	<view>
		<u-tabs :list="list" active-color="#ff9900" :is-scroll="false" :current="current" @change="change" class="tabs"></u-tabs>
		
		<!-- 订单列表 -->
		<view class="u-p-20"  v-for="(item,index) in ordlist" :key="index" @click="toDetail(item.id)">
			<view class="u-m-20">
				<u-table align="left" border-color="#EFF0F3" bg-color="#EFF0F3" padding="10rpx">
					<u-tr class="u-tr" >
						<u-td class="u-td" width="180rpx">下单时间：</u-td>
						<u-td class="u-td">{{item.created_at}}</u-td>
					</u-tr>
					<u-tr class="u-tr" >
						<u-td class="u-td" width="180rpx">订单编号：</u-td>
						<u-td class="u-td">{{item.order_no}}</u-td>
					</u-tr>				
				</u-table>
			</view>
				

			
				<view class="car_home_foods">
					<view class="car_food_item" v-for="sub in item.orderDetails.data" :key="sub.id">
						
						<view class="car_food_info">
							<view class="car_food_img">
								<block v-if="sub.goods">
									<image class="food_img" :src="sub.goods.cover_url" mode="aspectFill"></image>
								</block>
								<block v-else>
									<image class="food_img default" src="@/static/default_good1.png" mode="aspectFill">
									</image>
								</block>
							</view>
							<view class="car_food_right">
								<view class="car_food_top">
									<view class="car_food_left">
										<view class="car_food_name">{{sub.goods.title}}
										</view>
										<view class="car_food_label">{{sub.goods.description}}</view>
									</view>
									<view class="car_edit_right">
										<view class="car_food_name">数量：{{sub.num}}
										</view>
									</view>
								</view>
								<view class="car_food_bottom">
									<view class="car_food_price">
										￥ {{sub.goods.price?parseFloat(sub.goods.price).toFixed(2):'0.00'}}
									</view>
								
								</view>
							</view>
						</view>
					</view>
				</view>
		
		</view>
		<!-- 列表结束 --> 
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
					name: '全部'
				}, {
					name: '已下单'
				}, {
					name: '待付款'
				}, {
					name: '待发货',
					count: 5
				}],
				current: 0,
				ordlist:[],
				page:1,
				isLast:false //最后一页

			}
		},
		//onLoad 只加载一次，onshow返回会重新加载 
		onLoad() {    
			this.orders()
		},
		methods: {
			change(index) {
				this.current = index;
				//判断选项卡
				this.ordlist = []
				this.page = 1
				this.orders()
			},
			async orders(){
				const params = {
					page:this.page,
					include:'orderDetails.goods',
				}
				if(this.current == 1) params.status = 1
				if(this.current == 2) params.status = 2
				if(this.current == 3) params.status = 3
				const res = await this.$u.api.ordersList(params)
				
				this.ordlist = [...this.ordlist,...res.data]
				this.isLast = res.meta.pagination.total_pages ? false : true
				console.log(this.isLast)
			},
			//下拉更多 重新获取数据，带上分页参数			
			onReachBottom() {
				if(this.isLast) return
				this.$u.toast('下拉加载中...')
				this.page = this.page + 1
				this.orders()
			},
			//跳转到订单详情页 
			toDetail(id){
				this.$u.route({
					type:'navigateTo',    //redirect 带反回2层,
					url:'/pages/cart/odersdetail?id='+id
				})
			}
		}
	}
</script>

<style scoped lang="scss">
    /* #ifdef H5 */
	.tabs{
		position: sticky;
		top: 80rpx;
		z-index: 999;
	}
	/* #endif */
	/* #ifndef H5 */
	.tabs{
		position: sticky;
		top: 0rpx;
		z-index: 999;
	}
	/* #endif */

	.car_home_foods {
		background-color: #ffffff;

		.car_food_item {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			padding: 20rpx;
			box-sizing: border-box;
			border-bottom: 2rpx solid #eaeaea;

			&:last-of-type {
				border-bottom: 0;
			}

			.car_food_info {
				display: flex;
				justify-content: space-between;
				align-items: stretch;
				width: 100%;

				.car_food_img {
					width: 160rpx;
					height: 160rpx;
					border: 2rpx solid #dfe2e7;
					box-sizing: border-box;
					margin-right: 20rpx;
					border-radius: 10rpx;
					overflow: hidden;
					position: relative;

					.food_img {
						width: 100% !important;
						height: 100%;
						border-radius: 10rpx;
					}
				}

				.car_food_right {
					width: 72%;
					display: flex;
					flex-wrap: wrap;
					align-content: space-between;

					.car_food_top {
						width: 100%;
						display: flex;
						justify-content: space-between;
						align-items: flex-start;

						.car_food_left {
							width: 75%;

							.car_food_name {
								font-size: 20rpx;
								font-weight: bold;
								margin: 5rpx 0;
							}

							.car_food_remark {
								// color: #868ea4;
								// font-style: italic;
								font-size: 24rpx;
								margin-bottom: 5rpx;
							}

							.car_food_label {
								color: #7E7E7E;
								font-size: 20rpx;
								margin-bottom: 5rpx;
							}
						}

						.car_edit_right {
							display: flex;
							align-items: center;
							justify-content: flex-end;

							.car_edit_btn {
								color: #DB0E7E;
								font-size: 24rpx;
								font-weight: bold;
								font-smooth: Roboto;
								display: inline-block;
								padding: 5rpx 15rpx;
								border-radius: 30rpx;
								border: 1px solid #DB0E7E;
								margin-right: 20rpx;
							}

							.car_del_icon {
								width: 24rpx;
								height: 30rpx;
							}
						}

						text {
							font-weight: bold;
							font-size: 28rpx;
						}
					}

					.car_food_bottom {
						width: 100%;
						display: flex;
						justify-content: space-between;
						align-items: center;

						.car_food_price {
							color: #DB0E7E;
							font-size: 26rpx;
							font-weight: 500;

							text {
								color: #8E8E8E;
								font-size: 22rpx;
								text-decoration: line-through;
								margin-left: 15rpx;
								font-weight: 400;
							}
						}
					}
				}
			}
		}
	}
</style>
